<template>
  <div class="app flex-row align-items-center">
    <div class="container">
      <b-row class="justify-content-center">
        <b-col md="8">
          <b-card-group :model="loginForm" :rules="loginRules" ref="loginForm">
            <b-card no-body class="p-4">
              <b-card-body>
                <h1>登 录</h1>
                <p class="text-muted">使用你的账户登录</p>
                <b-input-group class="mb-3">
                  <b-input-group-prepend><b-input-group-text><i class="icon-user"></i></b-input-group-text></b-input-group-prepend>
                  <input type="text" class="form-control" v-model="loginForm.username" placeholder="Username">
                </b-input-group>
                <b-input-group class="mb-4">
                  <b-input-group-prepend><b-input-group-text><i class="icon-lock"></i></b-input-group-text></b-input-group-prepend>
                  <input type="password" class="form-control" v-model="loginForm.password" placeholder="Password">
                </b-input-group>
                <b-row>
                  <b-col cols="6">
                    <b-button variant="primary" class="px-4" v-on:click="handleLogin">登录</b-button>
                  </b-col>
                  <b-col cols="6" class="text-right">
                    <b-button variant="link" class="px-0">忘记密码?</b-button>
                  </b-col>
                </b-row>
              </b-card-body>
            </b-card>
            <b-card no-body class="text-white bg-primary py-5 d-md-down-none" style="width:44%">
              <b-card-body class="text-center">
                <div>
                  <h2>注册</h2>
                  <p>占时不用.</p>
                  <b-button variant="primary" class="active mt-3">立即注册!</b-button>
                </div>
              </b-card-body>
            </b-card>
          </b-card-group>
        </b-col>
      </b-row>
    </div>
  </div>
</template>

<script>
// import {
//   login
// } from '../../api/login/login'
import { isvalidUsername } from '@/utils/validate'
import { Message } from 'element-ui'
// import Cookies from 'js-cookie'
export default {
  name: 'Login',
  data () {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能小于5位'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePass }]
      },
      loading: false
    }
  },
  methods: {
    handleLogin () {
      // this.loading = true
      // if (this.loginForm.username.length > 3 & this.loginForm.password > 5) {
      //   login(this.loginForm).then(response => {
      //     Message({
      //       message: '登录成功!',
      //       type: 'success',
      //       duration: 5 * 1000
      //     })
      //     this.loading = false
      //     Cookies.set('username', this.loginForm.username)
      //   }).catch(() => {
      //     this.loading = false
      //     Message({
      //       message: '用户名或密码错误!',
      //       type: 'error',
      //       duration: 5 * 1000
      //     })
      //   })
      // } else {
      //   Message({
      //     message: '用户名低于四位,密码低于6位!',
      //     type: 'warning',
      //     duration: 5 * 1000
      //   })
      //   return false
      // }
      this.loading = true
      if (this.loginForm.username.length > 3 & this.loginForm.password > 5) {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          Message({
            message: '登录成功!',
            type: 'success',
            duration: 5 * 1000
          })
          this.loading = false
          this.$store.commit('SET_NAME', this.loginForm.username)
          this.$router.push({ path: '/' })
        }).catch(() => {
          this.loading = false
          Message({
            message: '用户名或密码错误!',
            type: 'error',
            duration: 5 * 1000
          })
        })
      } else {
        console.log('error submit!!')
        Message({
          message: '用户名低于四位,密码低于6位!',
          type: 'warning',
          duration: 5 * 1000
        })
        return false
      }
    }
  }
}
</script>
